{% extends "ft/base.html" %}
{% block title %}天天生鲜-提交订单{% endblock %}
{% block css %}

{% endblock %}
{% block content %}
    <div class="container">
        <!--2.搜索框开始-->
        <div class="search">
            <div class="row ">
                <div class="col-lg-5">
                    <img src="/static/ft/img/logo.png" alt="..." class="img-rounded">
                    <span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;提交订单</span>
                </div>
                <div class="col-lg-6 col-lg-offset-1 search_bar">
                    <form action="">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="搜索商品">
                            <span class="input-group-btn">
                    <button class="btn btn-success" style="padding: 6px 50px" type="submit">搜索</button>
                </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--搜索框结束-->
        <!--3.主体-->
        <div class="main">
            <!--收货地址-->
            <form action="/ft/order/add/" method="post">
                {% csrf_token %}
                <input type="hidden" name="receiver_id" value="{{ receiver.id }}">

                <div class="panel panel-default ">
                    <div class="panel-heading col-lg-12">确认收货地址</div>
                    <div class="panel-body">
                        <div>
                            {{ receiver.address }} （{{ receiver.name }} 收） {{ receiver.phone }}
                            <a style="margin-left: 500px" class="btn btn-default" href="edit-address.html"
                               role="button">编辑收货地址</a>
                        </div>

                    </div>
                </div>
                <!--支付方式-->
                <div class="panel panel-default ">
                    <div class="panel-heading col-lg-12">支付方式</div>
                    <div class="panel-body">
                        <div class="radio">
                            <label>
                                <input type="radio" name="paymethod" value="1">
                                <img src="/static/ft/img/pay/yhk.png" alt="..." class="img-thumbnail">
                            </label>
                            <label>
                                <input type="radio" name="paymethod" value="2">
                                <img src="/static/ft/img/pay/wx.png" alt="..." class="img-thumbnail">
                            </label>
                            <label>
                                <input type="radio" name="paymethod" value="3" checked>
                                <img src="/static/ft/img/pay/zfb.png" alt="..." class="img-thumbnail">
                            </label>
                            <label>
                                <input type="radio" name="paymethod" value="4">
                                <img src="/static/ft/img/pay/yl.png" alt="..." class="img-thumbnail">
                            </label>
                        </div>

                    </div>
                </div>


                <!--商品列表-->
                <div class="panel panel-default ">
                    <div class="panel-heading col-lg-12">商品列表</div>
                    <div class="panel-body">
                        <table class="table table-bordered table-hover">
                            <tr align="center" valign="middle">
                                <td>序号</td>
                                <td>图片</td>
                                <td>商品名称</td>
                                <td>商品单位</td>
                                <td>商品价格</td>
                                <td>数量</td>
                                <td>小计</td>
                            </tr>
                            {% for cart in cart_list %}
                                <input type="hidden" name="cart_ids" value="{{ cart.id }}">
                                <tr align="center" valign="center">
                                    <td>{{ forloop.counter }}</td>
                                    <td>
                                        <img class="img-thumbnail" src="/static/bg/img/{{ cart.goods.picture }}"
                                             width="60px" alt="">
                                    </td>
                                    <td>{{ cart.goods.name }}</td>
                                    <td>{{ cart.goods.unite }}</td>
                                    <td>{{ cart.goods.price }}元</td>
                                    <td>{{ cart.count }}</td>
                                    <td>{% widthratio cart.goods.price 1 cart.count %}元</td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>

                <!--总金额结算-->
                <div class="panel panel-default">
                    <div class="panel-heading col-lg-12">总金额结算</div>
                    <div class="panel-body">
                        <table class="table table-bordered table-hover">
                            <tr align="center" valign="middle">
                                <td>商品件数</td>
                                <td>总金额</td>
                                <td>运费</td>
                                <td>实付款</td>
                            </tr>
                            <tr align="center" valign="center">
                                <td>{{ totle_count }}</td>
                                <td>
                                    {{ totle_price }}
                                </td>
                                <td>{{ freight }}</td>
                                <td>{{ totle_actual }}</td>
                            </tr>

                        </table>
                    </div>
                </div>

                <!--提交订单按钮-->
                <div>
                    <input type="submit" class="btn btn-success col-lg-3 col-lg-offset-9" value="提交订单">
                </div>
            </form>
        </div>

    </div>
{% endblock %}
{% block js %}{% endblock %}